<#assign pojoNameLower = pojo.shortName.substring(0,1).toLowerCase()+pojo.shortName.substring(1)>

<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ include file="/common/taglibs.jsp"%>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <script type="text/javascript">
    //<![CDATA[
            var ${pojoNameLower}GridIdString="#${pojoNameLower}List";
     		function gridReload(gridId) {
				var urlString = "${pojoNameLower}Grid";
				//var groupon = jQuery("#groupon_").val();
				var groupon = jQuery('input[name="groupon_"]').filter(
				':checked').val();
				if(jQuery.type(groupon) === "undefined" || jQuery.type(groupon)==="null")
					groupon="and";
				//var stringField = jQuery("#stringField").val();
				//var intObjField = jQuery("#intObjField").val();

				urlString = urlString + "?groupon_="+groupon;
						//+"&filter_LIKE_stringField="+ stringField;
				// + "&filter_LIKE_dictionary.name=" + dictionaryName;
				urlString = encodeURI(urlString);
				jQuery("#"+gridId).jqGrid('setGridParam', {
					url : urlString,
					page : 1
				}).trigger("reloadGrid");
			}

           
			function toolbarInit(){
    	       jQuery(function (){
		    	  jQuery( "#addRecord" ).button({
			            text: true,
			            icons: {
			                primary: "ui-icon-document"
			            }
			        }).click(function (){
			        	addNewRecord('edit${pojo.shortName}','${pojoNameLower}List','50%','70%');
			        });
			        jQuery( "#modifyRecord" ).button({
			            text: true,
			            icons: {
			                primary: "ui-icon-pencil"
			            }
			        }).click(function (){
			        	editRecord('edit${pojo.shortName}','${pojoNameLower}List','modelId','50%','70%');
			        });
			        jQuery( "#deleteRecords" ).button({
			            text: true,
			            icons: {
			                primary: "ui-icon-scissors"
			            }
			        }).click(function(){
			        	deleteRecords("delete${pojo.shortName}","${pojoNameLower}List");
			        }
			        );
			        jQuery( "#searchArea" ).button({
			        	text: true,
			            icons: {
			                primary: "ui-icon-search"
			            }
			        }).click(function(){innerlayout.toggle('north');});
			        <#if fType=="2" && pojo.shortName==masterShortName> 
			        jQuery( "#${pojoNameLower}TabsArea" ).button({
			        	text: true,
			            icons: {
			                primary: "ui-icon-search"
			            }
			        }).click(function(){innerlayout.toggle('east');});
			        </#if>
    			});
			}
		
	jQuery(document).ready(function() {
	innerlayout = jQuery(mainLayout.options.center.paneSelector).layout(
						{
							applyDemoStyles : true,
							north__spacing_open:0,
							north__spacing_closed:0,
							//north__togglerLength_open:		0	,		// HIDE the toggler button
							//north__togglerLength_closed:	-1	,		// "100%" OR -1 = full width of pane
							north__togglerAlign_open:"right",//pane打开时，边框按钮显示的位置   
							north__togglerAlign_closed:"right",//pane关闭时，边框按钮显示的位置 
							center__contentSelector:".ui-layout-content",
							north__initClosed: true,
							north__slidable:false, 
							center__paneSelector : "#inter_center",
							<#if fType=="2" && pojo.shortName==masterShortName> 
							east__paneSelector : "#inter_east",
			                east__size : '50%', 
			                east__spacing_open:0,
			                east__spacing_closed:0,
			                east__onresize : function() {
			                	resizeMasterTabs("masterEntityTabs",innerlayout.state.east);
			                },
			                </#if>
							//west__size : '40%', // percentage size expresses as a string
							center__onresize : function() {
							resizeGrid("#${pojoNameLower}List",innerlayout.state.center,innerlayout.options.center.paneSelector);
							}
						});
			
			toolbarInit();
			${pojoNameLower}Grid = jQuery(${pojoNameLower}GridIdString), 
            lastSel = -1, 
            editingRowId = -1;
            ${pojoNameLower}Grid.jqGrid({
            	url : "${pojoNameLower}Grid",
    			datatype : "json",
    			mtype : "GET",
                colModel:[
				<#list pojo.getAllPropertiesIterator() as field>
					<#if !c2h.isCollection(field) && !c2h.isManyToOne(field) && !c2j.isComponent(field)>
						{name:'${field.name}',index:'${field.name}',align:'center',label : '<s:text name="${pojoNameLower}.${field.name}" />',hidden:false<#rt/><#if field.equals(pojo.identifierProperty)><#t/>,key:true</#if><#if field.value.typeName == "java.util.Date"><#t/>,formatter:'date'</#if><#if field.value.typeName == "boolean" || field.value.typeName == "java.lang.Boolean"><#t/>,formatter:'checkbox'</#if><#if  field.value.typeName == "float" || field.value.typeName == "double" ||  field.value.typeName == "java.lang.Float" || field.value.typeName == "java.lang.Double" || field.value.typeName == "java.math.BigDecimal"><#t/>,formatter:'number'</#if><#if  field.value.typeName == "int" || field.value.typeName == "long" ||  field.value.typeName == "short" || field.value.typeName == "java.lang.Integer" || field.value.typeName == "java.lang.Long" || field.value.typeName == "java.lang.Short"><#t/>,formatter:'integer'</#if><#t/>}<#if field_has_next>,</#if>
						
					</#if>
				</#list>    

                ],
                jsonReader : {
    				root : "pageList", // (2)
    				page : "page",
    				total : "total",
    				records : "records", // (3)
    				repeatitems : false
    			// (4)
    			},
                rowNum:10,
                rowList:[5,10,20,50,100,200],
                pager: '#${pojoNameLower}Pager',
                gridview:true,
                rownumbers:true,
               // sortname: 'demoId',
                viewrecords: true,
               // sortorder: 'desc',
                caption:'<s:text name="${pojoNameLower}List.title" />',
                height:300,
                gridview:true,
                rownumbers:true,
               // loadui: "disable",
                multiselect: true,
				multiboxonly:true,
				shrinkToFit:false,
				autowidth:false,
                onSelectRow: function(rowid) {
                <#if fType=="2" && pojo.shortName==masterShortName> 
                	var tabIndex=$("#${pojoNameLower}Tabs" ).tabs('option', 'selected');
                	reloadTabsContent(tabIndex,rowid);
                </#if>
                
					},
				 gridComplete:function(){
	               if(jQuery(this).getDataIDs().length>0){
	                  jQuery(this).jqGrid('setSelection',jQuery(this).getDataIDs()[0]);//默认选中第一行
	                }
	           	} 

            });
            jQuery(${pojoNameLower}Grid).jqGrid('bindKeys');
            jQuery(${pojoNameLower}Grid).jqGrid('navGrid','#${pojoNameLower}Pager',
            		{edit:false,add:false,del:false},
            		{},
            		{},
            		{},
            		{multipleSearch:true, multipleGroup:true}
            		);
           resizeGrid("#${pojoNameLower}List",innerlayout.state.center,innerlayout.options.center.paneSelector);
           <#if fType=="2" && pojo.shortName==masterShortName> 
           <%@ include file="/WEB-INF/pages/${detailShortNameLower}/${detailShortNameLower}List.jsp"%>
           $( "#${pojoNameLower}Tabs" ).tabs(
						{ 	
							select:function(event,tab){
								tabIndex = tab.index;
								reloadTabsContent(tabIndex);
							}
						}
				);
				resizeMasterTabs("masterEntityTabs",innerlayout.state.east);
			</#if> 	
        	jQuery( "button" ).button();
        });
  <#if fType=="2" && pojo.shortName==masterShortName>      
  	function reloadTabsContent(tabIndex,rowId){
	  	if(tabIndex==0){
	  		var urlString = "${detailShortNameLower}Grid";
			urlString = urlString + "?${masterIdName}=" + rowId;
			setTimeout(function (){
				$("#${detailShortNameLower}List").jqGrid('setGridParam', {
					url : urlString,
					page : 1
				}).trigger("reloadGrid");
			},200);
		}
	}
	function resizeMasterTabs(tabsId,pan_state){
  		$('#'+tabsId).tabs().height(pan_state.innerHeight-6);
  		var tabIndex=$("#${pojoNameLower}Tabs" ).tabs('option', 'selected');
  		if(tabIndex==0){
			resizeGrid("#${detailShortNameLower}List",pan_state,innerlayout.options.east.paneSelector);		}
  	}
	</#if>    
    </script>
 </head>
<body>


<div id="inter_center" class="ui-layout-pane-inter-center">
	<div class="header ui-state-default">
			<div id='toolbar'>
				<button id='addRecord'>
					<s:text name='button.new' />
				</button>
				<button id='modifyRecord'>
					<s:text name='button.modify' />
				</button>
				<button id='deleteRecords'>
					<s:text name='button.delete' />
				</button>
				<button id='searchArea'>
					<s:text name='button.search' />
				</button>
				<#if fType=="2" && pojo.shortName==masterShortName> 
				<button id='${pojoNameLower}TabsArea'>
					<s:text name='button.tabsToggle' />
				</button>
				</#if>
			</div>
	</div>
	<div class="ui-layout-content">
		<table id="${pojoNameLower}List"></table>
		<div id="${pojoNameLower}Pager"></div>
	</div>
</div>
<div id="inter_north" class="pane ui-layout-north">
	<div id="${pojoNameLower}ListSearchDiv">
			<!-- <input type="text" id="stringField" >-->
			<!-- <input type="text" id="intObjField" > -->
			<input type="radio" id="groupon_"  name="groupon_" value="and"><s:text name="lable.and" /></input><input type="radio" id="groupon_" name="groupon_" value="or"><s:text name="lable.or" /></input>
			<button type="button" onclick="gridReload('${pojoNameLower}List')"><s:text name="button.search" /></button>
			<button type="button" onclick="clear_input_elements('${pojoNameLower}ListSearchDiv');gridReload('${pojoNameLower}List')"><s:text name="button.clean" /></button>
	</div>
</div>

<#if fType=="2" && pojo.shortName==masterShortName>
<div id="inter_east"  class="pane ui-layout-east ui-layout-pane-inter-center">
	<div id="${pojoNameLower}Tabs">
			<ul>
				<li><a href="#${detailShortNameLower}List_div"><s:text name="${detailShortNameLower}List.title" /></a></li>
			</ul>
			<div id="${detailShortNameLower}List_div">
				<table id="${detailShortNameLower}List"></table>
				<div id="${detailShortNameLower}Pager"></div>
			</div>
	</div>
</div>
</#if>
</body></html>   
    
